<template>
  <div class="handle-logs-box" ref="logscrollbox" v-loading="earlier_loading">
    <div class="show-history-btn" :class="{'has-history':!logs_is_all,'no-history':logs_is_all}" @click="queryLogsList">{{logs_is_all?'没有更多了':'查看历史记录'}}</div>
    <ul class="handle-logs-list" @click="scrollToBottom">
      <li v-for="(log,i) in logs_list" :key="'hl_'+i">
        <span><span>{{$store.state.role_list[log.attendeeType]||''}}</span><span>{{log.attendeeName}}</span><span>{{$store.state.action_list[log.attendeeOperation]||''}}</span></span>
        <span>{{log.show_time}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import WorkbenchService from '@/services/WorkbenchService.js';

export default {
  props:{
    // is_all:{
    //   type:Boolean,
    //   default:true
    // },
    // data_list:{
    //   type:Array,
    //   default:()=>{
    //     return []
    //   }
    // },
    event_id:{
      type:Number,
      default:null
    }
  },
  data(){
    return {
      logs:[{
        show_info:'1',
        show_time:'8:00:66'
      }],
      earlier_loading:0,
      delay_time:800,//防抖动

      //列表
      page_num:1,
      page_size:10,
      page_total:1,
      logs_is_all:0,
      logs_list:[],
    }
  },
  // computed:{
  //   logs_list(){
  //     let arr;
  //     arr=this.data_list.map(v=>{
  //       v.show_time=v.creatTime.split(' ')[1];
  //       let obj = Object.assign({},obj,v);
  //       return obj;
  //     })
  //     return arr
  //   }
  // },
  watch:{
    event_id(nv){
      console.log(nv)
      this.resetData();
      this.queryLogsList();
    }
  },
  created(){
    for(let i=0;i<5;i++){
      this.logs.unshift({
        info:'1safdasdfasdf',
        time:'8:00:66'
      })
    }
  },
  mounted(){
    if(this.$refs.logscrollbox){
      //监听滚动事件
      this.$refs.logscrollbox.addEventListener('scroll', ()=> {
        // console.log(this.$refs.logscrollbox.scrollTop);
        this.loadEarlier(this.$refs.logscrollbox.scrollTop)
      });

      //loading的时候阻止滚动
      this.$refs.logscrollbox.addEventListener("wheel",(e)=>{
        e=e||window.event;
        if(this.earlier_loading){
          // console.log(this.earlier_loading,'preventwheel')
          e.preventDefault();
        }
      })
      //输入事件，监听不到
      // this.$refs.logscrollbox.addEventListener("keydown",(e)=>{
      //    console.log("keydown")
      //   e=e||window.event;
      //   console.log(e.key)
      //   if(this.earlier_loading&&(e.key == "ArrowDown" || e.key == "ArrowUp")){
      //     e.preventDefault();
      //   }
      // })
    }


  },
  methods:{
    //划到底部
    scrollToBottom(){
      let h1=this.$refs.logscrollbox.scrollHeight,h2,bh=this.$refs.logscrollbox.clientHeight;
      this.logs_list.push({
        info:'clickappned',
        time:'9.9.9'
      });

      this.$nextTick(()=>{
        h2=this.$refs.logscrollbox.scrollHeight;
        console.log(bh,h1,h2);
        this.scrollAnimateTop('logscrollbox','bottom',h2-bh)
      })
    },
    //滑动动画
    scrollAnimateTop(name,direction,distance,count,step){
      if(distance<=0){return;}
      step=Math.ceil(step||(distance/10));//小数点不再滚动范围内
      count=count||0;
      console.log(distance,step)
      let el=this.$refs[name];
      if(Object.prototype.toString.call(el)=="[object Array]"){
        el=el[0]
      }
      el&&setTimeout(()=>{
        if(direction=="top"){
          el.scrollTop-=step;
        }else if(direction=="bottom"){
          el.scrollTop+=step;
        }
        count+=step;
        // console.log("距离",distance,count,step,"top",el.scrollTop,'h',el.scrollHeight)
        if(count>=distance){
          count=null;
          el=null;
        }else{
          this.scrollAnimateTop(name,direction,distance,count,step);
        }
      },5)
    },
    //日志列表查询
    queryLogsList(succback){
      if(this.$store.state.is_test){
        this.earlier_loading=1;
        console.log("请求中...")
        setTimeout(()=>{
          console.log("请求结束...")
          this.earlier_loading=0;
          this.logs.unshift({
            info:'历史记录',
            time:'8.8.8.8'
          })
          typeof succback=="function"&&succback();
        },2000)
        return;
      }
      if(!this.event_id||this.logs_is_all){return;}
      let param={
        pageNumber:this.page_num,
        pageSize:this.page_size,
        eventId:this.event_id
      };
      this.earlier_loading=1;
      WorkbenchService.queryLogsList(param)
      .then(res=>{
        if(res&&res.data&&res.data.result){
          let r=res.data.data.records;
          if(Array.isArray(r)&&r.length>0){
            r.forEach(v=>{
              v.show_time=v.creatTime&&v.creatTime.split(' ')[1];
              this.logs_list.unshift(v);
            })
            this.page_num++;
          }else{
            this.logs_is_all=1;
          }
          // console.log(r,this.logs_list);
          this.earlier_loading=0;
        }
      }).catch(err=>{
        console.log(err);
        this.earlier_loading=0;
      })
    },
    //数据重置
    resetData(){
      this.page_num=1;
      this.logs_is_all=0;
      this.logs_list=[];
    },
    //加载操作
    loadEarlier(stp){
      // console.log(stp)
      if(stp==0&&!this.earlier_loading){
        // 保留高度
        let el=this.$refs.logscrollbox,elh1=el.scrollHeight;
        this.queryLogsList(()=>{
          this.$nextTick(()=>{
            let elh2=el.scrollHeight;
            console.log("unshift",elh1,elh2)
            el.scrollTop=elh2-elh1;//位置保持
          })
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.show-history-btn{
  text-align:center;
  margin-top:.1rem;
  font-size:.12rem;
}
.no-history{
  color:fc-btn-disabled;
  cursor:default;
}
.has-history{
  color:bg-main;
  cursor:pointer;
}
.handle-logs-box{
  width:100%;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  .handle-logs-list{
    >li{
      color:fc-content;
      display:flex;
      justify-content:space-between;
      margin:.2rem;
    }
  }
}
</style>


